<template>
    <div>
        <el-dialog width="70%" title="微信用户订单信息" :visible.sync="info.dialogFormVisibleinfo">
        <div class="div_first">
            <h4>收货信息</h4>
            <p><span>用户昵称：{{userInfo.nickname}}</span><span>收货人：{{ orderInfos.real_name }}</span></p>
            <p><span>联系电话：{{ orderInfos.user_phone }}</span><span>收货地址：{{orderInfos.user_address}}</span></p>
        </div>
        <div class="div_throw">
            <h4>订单信息</h4>
            <p><span>订单ID：{{orderInfos.order_id}}</span><span style="color:red;">订单状态：{{ orderInfos._status._title }}</span></p>
            <p><span>商品总数：{{ orderInfos.total_num }}</span><span>商品总价：{{orderInfos.pay_price}}</span></p>
            <p><span>交付邮费：{{orderInfos.total_postage}}</span><span>优惠券金额：{{ orderInfos.coupon_price }}</span></p>
            <p><span>实际支付：{{ orderInfos.pay_price }}</span><span>创建时间：{{orderInfos._add_time}}</span></p>
            <p><span>支付方式：{{orderInfos._status._payType}}</span><span>推广人：{{ orderInfos._store_name }}</span></p>
            <p><span>商家备注：{{ orderInfos.status_pice }}</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="info.dialogFormVisibleinfo = false">取 消</el-button>
            <el-button type="primary" @click="info.dialogFormVisibleinfo = false">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:['info','orderInfos','userInfo']
}
</script>

<style lang="scss">
    .div_first{
        width: 100%;
        height: 130px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h4{
            font-size: 16px;
            font-weight: bold;
        }
        p{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span{
                display: block;
                width: 50%;
            }
        }
    }

    .div_throw{
        width: 100%;
        height: 300px;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h4{
            font-size: 16px;
            font-weight: bold;
        }
        p{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span{
                display: block;
                width: 50%;
            }
        }
    }
</style>